<template>
  <el-carousel
      :interval="3000"
      class="orange-carousel"
  >
    <!-- 轮播项，可根据实际替换内容，这里演示用简单文本 -->
    <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
      <div class="carousel-item-content">
        <img
            :src="item.image"
            alt="carousel"
            class="carousel-img"
        >
        <div class="carousel-text">
          <h3>{{ item.title }}</h3>
          <p>{{ item.desc }}</p>
        </div>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup>
import { ref } from 'vue';
import img1 from '@/assets/img1.png'
import img2 from '@/assets/img2.png'
import img3 from '@/assets/img3.png'
// 模拟轮播图数据，可替换为实际接口返回数据
const carouselItems = ref([
  {
    image: img1,
    title: '潮电数码抢24期免息',
    desc: '数码焕新 不止5折'
  },
  {
    image: img2,
    title: '夏日美妆狂欢季',
    desc: '爆款直降 买一赠一'
  },
  {
    image: img3,
    title: '时尚穿搭新风尚',
    desc: '夏季新款 全场3折'
  }
]);
</script>

<style scoped>
/* 轮播容器基础样式 */
.orange-carousel {
  background-color: #FF9933; /* 橙色背景 */
  border-radius: 8px;
  overflow: hidden;
}

/* 轮播项内容布局 */
.carousel-item-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 300px;
}

/* 轮播图图片样式 */
.carousel-img {
  width: 40%;
  height: auto;
  border-radius: 8px;
  margin-right: 20px;
}

/* 文本内容样式 */
.carousel-text {
  color: #fff;
  max-width: 50%;
}

.carousel-text h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.carousel-text p {
  font-size: 16px;
  line-height: 1.5;
}
</style>